<template>
  <div class="codeBox clear">
    <div class="messageBox codeBtnBox inpbox">
      <input type="text" @blur="trueCode" name="codeText" id="codeText" placeholder="请输入验证码"  ref="codeText" maxlength="4">
    </div>
    <input type="button" ref="codeBtn"  @click="createCode"  class="verification" v-model="checkCode"/>
  </div>
</template>

<script>
// var code="";
export default {
  
  data () {
    return {
      code:'',
      checkCode:'',
      picLyanzhengma:'',
    }
  },
  created(){
    this.createCode();
  },
  methods:{ 
    // 图片验证码
    createCode(){
                 //先清空验证码的输入
                 this.code = "";
                 this.checkCode = "";
                 this.picLyanzhengma = "";
                 //验证码的长度  
                    var codeLength = 4; 
                    //随机数 
          var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');  
          for(var i = 0; i < codeLength; i++) {
                        //取得随机数的索引（0~35）
                            var index = Math.floor(Math.random()*36);   
                            //根据索引取得随机数加到code上
              this.code += random[index];   
                    }
                    //把code值赋给验证码  
          this.checkCode = this.code; 
      },
      trueCode(){
        if(this.$refs.codeText.value == this.checkCode){
          window.console.log(this.$refs.codeText.value);
          window.console.log(this.checkCode);
          this.$emit('getChecked',true)
        }else{
          window.console.log(this.$refs.codeText.value);
          window.console.log(this.checkCode);
          this.$emit('getChecked',false)
          this.createCode();
        }
      }
    },
}
</script>

<style>
  .verification{
      width: 60px;
      height: 30px;
      float: left;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-top: 6px;
    }
  .codeBox>div{
    float: left;
  }
  .codeBtnBox{
    width: 100px;
    margin-right: 20px;
  }
</style>